<template>
	<view class="TUI-Create-conversation-container">
		<!-- <view class="tui-navigatorbar">
			<image class="tui-navigatorbar-back" @tap="goBack" src="/static/static/assets/ic_back_white.svg"></image>
			<view class="conversation-title">加入群聊</view>
		</view> -->
		<u-navbar back-text="返回" title="加入群聊"></u-navbar>
		<view class="tui-search-area" style="margin-top:78rpx;">
			<view class="tui-search-bar">
				<image class="tui-searchcion" src="/static/static/assets/serach-icon.svg"></image>
				<input class="tui-search-bar-input" :value="groupID" placeholder="请输入群ID" @input="groupIDInput"
					@confirm="searchGroupByID" @blur="searchGroupByID" />
			</view>
		</view>
		<view class="tui-person-to-invite" v-if="searchGroup.groupID">
			<image @tap="handleChoose" class="tui-normal-choose"
				:src="isChoose ? '/static/static/assets/single-choice-hover.svg' : '/static/static/assets/single-choice-normal.svg'">
			</image>
			<view class="tui-person-profile">
				<image class="tui-person-profile-avatar" :src="groupAvatar || '/static/static/assets/gruopavatar.svg'">
				</image>
				<view>
					<view class="tui-person-profile-nick">{{ searchGroup.name }}</view>
					<view class="tui-person-profile-userID">群ID：{{ searchGroup.groupID }}</view>
				</view>
			</view>
		</view>
		<view class="tui-confirm-btn" @tap="bindConfirmJoin">确认加入</view>
	</view>
</template>

<script>
	import logger from '@/utils/logger';

	export default {
		data() {
			return {
				groupID: '',
				searchGroup: {
					groupID: '',
					name: ''
				},
				isChoose: false,
				groupAvatar: ''
			};
		},

		components: {},
		props: {},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			groupIDInput(e) {
				this.setData({
					groupID: e.detail.value
				});
			},

			searchGroupByID() {
				uni.$TUIKit
					.searchGroupByID(this.groupID)
					.then(imResponse => {
						if (imResponse.data.group.groupID !== '') {
							this.setData({
								searchGroup: imResponse.data.group,
								groupAvatar: imResponse.data.group.avatar
							});
						}
					})
					.catch(imError => {
						uni.hideLoading();

						if (imError.code === 10007) {
							uni.showToast({
								title: '讨论组类型群不允许申请加群',
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: '未找到该群组',
								icon: 'none'
							});
						}
					});
			},

			handleChoose() {
				this.isChoose = !this.isChoose;
				this.setData({
					searchGroup: this.searchGroup
				});
			},

			bindConfirmJoin() {
				logger.log(`TUI-Group | join-group | bindConfirmJoin | groupID: ${this.groupID}`);

				if (this.isChoose) {
					uni.$TUIKit
						.joinGroup({
							groupID: this.groupID,
							type: this.searchGroup.type
						})
						.then(imResponse => {
							switch (imResponse.data.status) {
								case uni.$TUIKitTIM.TYPES.JOIN_STATUS_WAIT_APPROVAL:
									// 等待管理员同意
									break;

								case uni.$TUIKitTIM.TYPES.JOIN_STATUS_SUCCESS:
									// 加群成功
									console.log(imResponse.data.group); // 加入的群组资料
									uni.navigateTo({
										url: `/pages/subpackage/IM/TUI-Chat/chat?conversationID=GROUP${this.searchGroup.groupID}`
									});
									break;

								case uni.$TUIKitTIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP:
									// 已经在群中
									uni.navigateTo({
										url: `/pages/subpackage/IM/TUI-Chat/chat?conversationID=GROUP${this.searchGroup.groupID}`
									});
									break;

								default:
									break;
							}
						})
						.catch(imError => {
							console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
						});
				} else {
					uni.showToast({
						title: '请选择相关群聊',
						icon: 'error'
					});
				}
			}
		}
	};
</script>
<style>
	@import './join.css';
</style>